<template>
  <!--视图-->
  <div>
  <input type="checkbox" v-model="hobby" value="抽烟">抽烟<br>
  <input  type="checkbox" v-model="hobby" value="喝酒">喝酒<br>
  <input type="checkbox" v-model="hobby" value="烫头">烫头<br>
    你选择的是:{{hobby}}
    <br>
    <button @click="changeMSG">点击切换</button>
    <br>
    <span v-if="flag">你好,vue</span>
    <span v-if="!flag">你好,大山</span>
    <hr>
    <button @click="changeMSG2">点击切换2</button><br>
    {{msg}}
  </div>
</template>

<script>
export default {
  name: "LifeCycle",
  data() {//属性
    return {
      hobby:[],
      flag:true,
      msg:'你好,vue',
    }
  }, methods: {//自定义方法
    changeMSG2(){
      this.msg= this.msg=='你好,vue'?'你好,大山':'你好,vue';
    },
    changeMSG(){
      this.flag=!this.flag;
    }

  }, created() { //钩子函数
    console.log("2-created")
  },beforeCreate() {
    console.log("1-beforeCreate")
  },beforeMount() {
    console.log("3-beforeMount")
  }
}
</script>

<style scoped>

</style>